<?php $this->headTitle('Existing Users') ?>

<?php if (isset($this->messages['created'])): ?>
	<div class="ui-widget">
		<div class="ui-state-highlight ui-corner-all">
			<p>
				<span class="ui-icon ui-icon-info"></span>
				The <strong>user</strong> was successfully created
			</p>
		</div>
	</div>
<?php endif ?>

<?php if (isset($this->messages['updated'])): ?>
	<div class="ui-widget">
		<div class="ui-state-highlight ui-corner-all">
			<p>
				<span class="ui-icon ui-icon-info"></span>
				The <strong>user</strong> was successfully updated
			</p>
		</div>
	</div>
<?php endif ?>

<?php if (isset($this->messages['deleted'])): ?>
	<div class="ui-widget">
		<div class="ui-state-highlight ui-corner-all">
			<p>
				<span class="ui-icon ui-icon-info"></span>
				The <strong>user</strong> was successfully deleted
			</p>
		</div>
	</div>
<?php endif ?>

<div id="usersContainer" class="ui-widget grid_10">
	<h1>Existing Users:</h1>
	<?php if ($this->entries): ?>
		<?php $this->headStyle()->captureStart() ?>
		body {
			font-size:10px;
		}
		label, input {
			display:block;
		}
		.text {
			width:95%;
			padding:.4em;
			margin-bottom:12px;
		}
		#usersContainer table {
			width:100%;
		}
		#usersContainer th,
		#usersContainer td {
			padding:.6em 10px;
			border:1px solid #fff;
			vertical-align:middle;
		}
		<?php $this->headStyle()->captureEnd() ?>

		<?php $this->headScript()->captureStart() ?>
		$(function(){
			var $dialogCreate = $('#dialogCreate').dialog({
				modal:true,
				height:300,
				autoOpen:false,
				resizable:false,
				buttons:{
					'Create':function(){
						$(this).dialog('close');
					},
					Cancel:function(){
						$(this).dialog('close');
					}
				}
			});

			$('#createUser')
				.button({
					icons:{
						primary:'ui-icon-plusthick'
					}
				})
				.click(function(){
					$dialogCreate.dialog('open');
				});

			$('a:first', '#usersContainer td')
				.button({
					icons:{
						primary:'ui-icon-pencil'
					}
				})
				.next()
				.button({
					icons:{
						primary:'ui-icon-trash'
					}
				});

			var $dialogConfirm = $('#dialogDelete').dialog({
				modal:true,
				height:140,
				autoOpen:false,
				resizable:false,
				buttons:{
					'Delete':function(){
						$(this).dialog('close');
					},
					Cancel:function(){
						$(this).dialog('close');
					}
				}
			});
		});
		<?php $this->headScript()->captureEnd() ?>

		<div id="dialogCreate" title="Create new user">
			<?php echo $this->form.PHP_EOL ?>
		</div>

		<div id="dialogDelete" title="Confirm delete">
			<p>
				<span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>
				This item will be permanently deleted and cannot be recovered. Are you sure?
			</p>
		</div>

		<p>
			<button id="createUser">Create new user</button>
		</p>

		<table id="users" class="ui-widget ui-widget-content">
			<thead>
				<tr class="ui-widget-header">
					<th>Name</th>
					<th>Role</th>
					<th>Email</th>
					<th>Enabled</th>
					<th>Action</th>
				</tr>
			</thead>
			<tbody>
				<?php foreach ($this->entries as $entry): ?>
					<tr>
						<td><?php echo $this->escape($entry->name) ?></td>
						<td><?php echo $this->escape($entry->role) ?></td>
						<td><?php echo $this->escape($entry->email) ?></td>
						<td>
							<?php if ($entry->enabled): ?>
								<span class="ui-icon ui-icon-unlocked"></span>
							<?php else: ?>
								<span class="ui-icon ui-icon-locked"></span>
							<?php endif ?>
						</td>
						<td>
							<a href="<?php echo $this->url(array(
								'action' => 'update',
								'id' => $entry->id,
								'format' => 'html'
							)) ?>">Update</a>
							<a href="<?php echo $this->url(array(
								'action' => 'delete',
								'id' => $entry->id,
								'format' => 'html'
							)) ?>">Delete</a>
						</td>
					</tr>
				<?php endforeach ?>
			</tbody>
		</table>
	<?php endif ?>
</div>